// 创建一个路由器 并暴露出去

// 第一步 引入createRouter
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 第三步  引入一个个可能要呈现的组件
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import News from '../components/News.vue'
import Deatil from '../components/Detail.vue'

// 第二步： 创建路由器
const router = createRouter({
    // vue2中创建VueRouter实例是通过new VueRouter()实现的，而Vue是通过调用createRouter()方法
    history: createWebHistory(),     // history工作模式
    // history:createWebHashHistory(),     // hash工作模式
    //路由器工作模式有两种
    //  1、history模式
    //     优点：Url更加美观，不带#，更接近传统网站url
    //     缺点:后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误
    //  2、hash模式
    //     优点：兼容性更好，因为不需要服务器端处理路径
    //     缺点：Url带有#不美观，且在SEO优化方面比较差 


    routes: [{   //一个一个的路由规则
        name: 'zhuye',    //对路由进行命名
        path: '/home',    //路由的url
        component: Home   // 对应要展示的组件
    }, {
        name: 'guanyu',
        path: '/about',
        component: About
    }, {
        name: 'xinwen',
        path: '/news',
        component: News,
        children: [
            // props 就相当于 路由加载到这个页面的时候，在底层对这个组件进行了 <Detail a="xxx" b="xxx"> 操作
            // props 第一种写法：将路由收到的所有【params参数】作为props传给路由组件
            // {
            //     name: 'xiangqing',
            //     path: 'detail/:id/:title?/:content',  // 第一种写法需要再path后面进行参数占位
            //     component: Deatil,
            //     props:true,  // key value  写法
            // },
            // props 第二种写法： 函数写法，可以自己决定将什么作为props给路由组件  params和query传参都支持
             {
                name: 'xiangqing',
                path: 'detail',  // 第二种写法完全不需要进行占位
                component: Deatil,
                props(val){
                    console.log('看一眼props的val参数',val);  //val其实就是当前路由组件的路由信息
                    return val.query
                    // return val.params  //params也支持这种写法，不够第一种写法对于params来说更简洁
                }
            },
            // 第三张写法，对象写法，可以自己决定将什么作为props给路由组件，不过传递的都是固定值，用处不多
            //  {
            //     name: 'xiangqing',
            //     path: 'detail',  // 第二种写法完全不需要进行占位
            //     component: Deatil,
            //     props:{
            //         id:'halfsugar001',
            //         title:'半糖美式',
            //         content:'夜南漫剪'
            //     }
            // },
        ]
    },
    // 重定向
    {
        path:'/',
        redirect:'/home'   // 重定向就是让指定的路径 重新定位到指定的位置
    }
]
})

export default router
